<template lang="html">

  <div class="my-profile">
    <Header>
      <mu-icon value="arrow_back" slot="left" @touchend="back"></mu-icon>
      <span slot="title">完善个人信息</span>
    </Header>
    <mu-form :model="form" ref="profile">
      <mu-form-item label-width="100px" label-position="left" prop="input" label="手机号">
        <mu-text-field disabled :value="form.telNum"></mu-text-field>
      </mu-form-item>
      <mu-form-item label-width="100px" label-position="left" prop="name" label="姓名" :rules="usernameRules">
        <mu-text-field v-model="form.name" prop="name"></mu-text-field>
      </mu-form-item>
      <mu-form-item label-width="100px" label-position="left" prop="idCard" label="身份证号" :rules="idCardRules">
        <mu-text-field :value="form.idCard" v-model="form.idCard"></mu-text-field>
      </mu-form-item>
      <mu-form-item label-width="100px" label-position="left" prop="radio" label="性别">
        <mu-radio v-model="form.gender" value="男士" label="男士"></mu-radio>
        <mu-radio label="女士" value="女士" v-model="form.gender"></mu-radio>
      </mu-form-item>
      <mu-form-item label-width="100px" label-position="left" prop="age" label="年龄" :rules="ageRules">
        <mu-text-field :value="form.age" v-model="form.age"></mu-text-field>
      </mu-form-item>
      <mu-form-item label-width="100px" label-position="left" prop="weChat" label="微信号" :rules="weChatRules">
        <mu-text-field :value="form.weChat" v-model="form.weChat"></mu-text-field>
      </mu-form-item>
    </mu-form>
    <div class="btn">
      <mu-button color="primary" @click="submit">下一步</mu-button>
    </div>
  </div>

</template>

<script lang="js">
  // 引入header
  import Header from '@/components/Header';
  // 引入校验文件
  import { idCardRules, ageRules } from '@/tools/validators.js';
  export default  {
    name: 'my-profile',
    props: [],
    mounted () {

    },
    data () {
      return {
        form: {
          telNum: '',
          name: '',
          idCard: '',
          gender: '',
          age: 0,
          weChat: ''
        },
        // 校验规则
        usernameRules: [
          { validate: (val) => !!val, message: '必须填写用户名'},
          { validate: (val) => val.length >= 3, message: '用户名长度大于3'}
        ],
        // 校验身份证
        idCardRules: [
          { validate: idCardRules, message: '输入正确的身份证号码'  }
        ],
        // 年龄校验
        ageRules: [
          { validate: (val) => !!val, message: '必须填写年龄' },
          { validate: ageRules, message: '必须输入满18岁且小于60岁' }
        ],
        // 微信校验
        weChatRules: [
          { validate: (val) => !!val, message: '必须填写微信号' }
        ]
      }
    },
    methods: {
      // 后退
      back() {
        this.$router.go(-1);
      },
      // 下一步按钮
      submit() {
        this.$refs.profile.validate().then(res => {
          if(res) {
            this.$router.push('/myprofilenext');
          }
        })
      }
    },
    // 注册组件
    components: { Header },
    computed: {
      
    },
    // 创建完成后
    created() {
      // 获取用户信息 
      let userInfo = localStorage.getItem('userInfo');
      // 将字符串转为json格式
      let userinfo = JSON.parse(userInfo)
      // console.log(userinfo)
      this.form.telNum = userinfo.phone;
      this.form.name = userinfo.username;
    },
}


</script>

<style scoped lang="scss">
  .my-profile {
    .header {
      position: relative;
      .mu-icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
      span {
        display: block;
        text-align: center;
      }
    }
    .mu-form {
      width: 100%;
      max-width: 460px;
      padding: 12px;
      margin: 0 auto;
      .mu-form-item {
        display: flex;
        // flex-direction: row;
        .mu-form-item-content {
          color: #000;
        }
      }
    }
    .btn {
      width: 100%;
      button {
        display: block;
        margin: 0 auto;
      }
    }
  }
</style>
